<template>
  <div style="overflow: auto;position: fixed;" :style="{width:width+'px',height:height+'px'}">
    <!-- 引入组件. :lock-aspect-ratio="true"：锁定纵横比例 :resizable="false": 不可缩放-->
    <vue-draggable-resizable
      w="auto"
      h="auto"
      :grid="[20,40]"
      :x="10"
      :y="10"
      :resizable="false"
    >
      <img :src="pmtUrl" style="width: 1918px;height: 1012px;">
      <div v-for="collectPoint in collectPointList" style="position:absolute;" :style="{top:collectPoint.longitude+'px',left:collectPoint.latitude+'px'}" >
        <div>
          <img :src="pic" @click="clickSite(collectPoint)" style="cursor: pointer;">
        </div>
        <div style="color: white;font-size: 12px;">
          {{collectPoint.name}}
        </div>
      </div>
    </vue-draggable-resizable>

    <el-dialog :visible.sync="detailOpen" width="608px" :center="true" append-to-body >
      <pointDetail :collectPoint="collectPointVo" />
    </el-dialog>

  </div>
</template>

<script>
  import { getSysConfig } from "@/api/basic/sysConfig";
  import { selectCollectPoints } from "@/api/basic/collectPoint";
  import VueDraggableResizable from "vue-draggable-resizable";
  import pointDetail from "./pointDetail";

  export default {
    name: "SiteScatter",
    components: {
      VueDraggableResizable,pointDetail
    },
    data() {
      return {
        pic:require('@/assets/image/area.png'),
        pmtUrl:require('@/assets/image/pmt.png'),
        collectPointList:[],
        detailTitle:'',
        detailOpen:false,
        collectPointVo:{},
        width:1000,
        height:600,
      };
    },
    created() {
      this.width = document.body.clientWidth-200;
      this.height = document.body.clientHeight-85;
      this.initWindow()
      this.getPmtUrl();
      this.getList();
    },
    methods: {
      initWindow() {
        window.onresize = ()=>{
          return (() => {
            //调用methods中的事件
            this.width = document.body.clientWidth-200;
            this.height = document.body.clientHeight-85;
          })()
        }
      },
      getPmtUrl(){
        getSysConfig().then(response => {
          if(response.data.pmtPic!=undefined && response.data.pmtPic!=''){
            this.pmtUrl = response.data.pmtPic;
          }
        });
      },
      getList() {
        selectCollectPoints({ispmt:'Y'}).then(response => {
          this.collectPointList = response;
        });
      },
      clickSite(collectPoint){
        this.collectPointVo = collectPoint;
        this.detailOpen=true;
      }
    },
    //注销window.onresize事件
    destroyed(){
      window.onresize = null;
    }

  }
</script>
<style>
  .vdr {
    border: none;
  }
</style>

